import 'package:flutter/material.dart';
import 'package:flutterappyidongjingfen/Extension/touch_callback.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
import 'rankItem.dart';

class DepositBrowsePage extends StatefulWidget {
  @override
  DepositBrowsePageState createState() => DepositBrowsePageState();
}


class DepositBrowsePageState extends State<DepositBrowsePage> {
  var _currentIndex = 0;
  var _currentKindOfDeposit = 0;
  //报表分析 0——构成  1——趋势
  var _chartAnalyseWay = 0;
  var _isShowMore = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(11, 13, 28, 1),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          /// 导航栏
//          NavgationBar(),
          NavgationBar("存款概览", context),
          /// "一般存款" "全行"的下拉选择
          SletecView(),
          CardListView(),

        ],
      ),
    );
  }

  ///导航栏
//  Widget NavgationBar() {
//    return Container(
//      margin: EdgeInsets.only(left: 0, right: 15, top: 40),
//      height: 30,
//      child: Row(
//        children: <Widget>[
//          // 返回按钮
//          TouchCallBack(
//            isfeed: false,
//            onPressed: () {
//              Navigator.pop(context);
//            },
//            child: Container(
////              height: 40.0,
//              margin: const EdgeInsets.only(left: 12.0, right: 10.0),
//              child: Icon(
//                Icons.chevron_left,
//                color: Colors.white,
//                size: 30,
//              ),
//            ),
//          ),
//          //输入框
//          Expanded(
//              child: Text(
//                "存款概览",
//                textAlign: TextAlign.center,
//                style: TextStyle(fontSize: 18, color: Colors.white),
//              )
//          ),
//          Padding(padding: EdgeInsets.only(right: 42)),
//        ],
//      ),
//    );
//  }
  /// 下拉选择
  Widget SletecView(){
    return Container(
      margin: EdgeInsets.only(top: 20,left: 10,right: 10),
      width: MediaQuery.of(context).size.width,
      child: Row(
        children: <Widget>[
          TouchCallBack(
            onPressed: (){
              print("一般存款");
            },
            child: Row(
              children: <Widget>[
                Text("一般存款",style: TextStyle(fontSize: 14,color: Colors.white,fontWeight: FontWeight.bold)),
                Icon(Icons.arrow_drop_down,color: Colors.white,size: 18)
              ],
            ),
          ),
          Padding(padding: EdgeInsets.only(left:MediaQuery.of(context).size.width - 140),),
          TouchCallBack(
            onPressed: (){
              print("全行");
            },
            child: Row(
              children: <Widget>[
                Text("全行",style: TextStyle(fontSize: 14,color: Colors.white)),
                Icon(Icons.arrow_drop_down,color: Colors.white,size: 18)
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget CardListView(){
    return Container(
      margin: EdgeInsets.only(top: 10,left: 5,right: 5),
      height: MediaQuery.of(context).size.height - 160,
//      color: Colors.white,
      child: ListView(
        shrinkWrap: true,
        padding: EdgeInsets.only(top: 0),
        children: <Widget>[
          CommonDepositBalance(),
          SletecWayView(),
          _chartAnalyseWay == 0 ? cardForMechanism() : cardForTrends(),
          Container(
            margin: EdgeInsets.only(top: 10,bottom: 10,left: 20),
            child: Text("机构排名榜",style: TextStyle(fontSize: 16.0,color: Colors.white,fontWeight: FontWeight.bold)),
          ),
          cardForRank()
        ],
      ),
    );
  }



  /// 一般存款余额
  Widget CommonDepositBalance(){
    return Container(
      height: 233,
      child: Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
          color: Color(0xFF23283C),
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 25,bottom: 10),
                child: Center(
                  child: Text("一般存款余额",style: TextStyle(fontSize: 14.0,color: Colors.white70)),
                ),
              ),
              RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                      children: [
                        TextSpan(
                          text: "亿",
                          style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                        )
                      ],
                      text: "150.75",
                      style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD),
                      )
                  )
              ),
            Padding(padding: EdgeInsets.only(bottom: 10)),
//          Text("150.75亿",textAlign: TextAlign.center,style: TextStyle(fontSize: 42,color: Color(0XFF119CFD)),),
              CompareRow(),
              Padding(padding: EdgeInsets.only(bottom: 12)),
              Text("更新时间：2019-04-12",textAlign: TextAlign.center,style: TextStyle(fontSize: 12,color: Color(0XFF7981A0)),),
            ],
          )
      ),
    );
  }

  Widget CompareRow(){
    return Container(
      margin: EdgeInsets.only(top: 10,bottom: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Column(
            children: <Widget>[
              Text("比上日",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0,),
                  Text("3.48亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
                ],
              )
            ],
          ),
          Column(
            children: <Widget>[
              Text("比上月",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0),
                  Text("100亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
                ],
              )
            ],
          ),
          Column(
            children: <Widget>[
              Text("比年初",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
                  Icon(Icons.arrow_downward,color: Color(0xFF1AEFBA),size: 16.0),
                  Text("100亿",style: TextStyle(color: Color(0xFF1AEFBA),fontSize: 16.0),)
                ],
              )
            ],
          ),
        ],
      ),
    );
  }

  ///"趋势" "构成选择"
  Widget SletecWayView(){
    return Container(
      margin: EdgeInsets.only(top: 15,left: 10,right: 10),
      width: MediaQuery.of(context).size.width,
      child: Row(
        children: <Widget>[
          TouchCallBack(
            onPressed: (){
              print("一般存款");
            },
            child: Row(
              children: <Widget>[
                Text("报表分析",style: TextStyle(fontSize: 16,color: Colors.white,fontWeight: FontWeight.bold)),
                Icon(Icons.arrow_drop_down,color: Colors.white,size: 18)
              ],
            ),
          ),
          Padding(padding: EdgeInsets.only(left:MediaQuery.of(context).size.width - 225),),
          Container(
              height: 34,
              width: 110,
              child: Stack(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(17.0),
                      border:Border.all(width: 0.5,color: Color(0xFF6C7390)),
                    ),
                  ),
              Row(
               children: <Widget>[
                 TouchCallBack(
                  onPressed: (){
                    setState(() {
                      _chartAnalyseWay = 0;
                    });
                  },
                  child:  selectButton("构成", _chartAnalyseWay == 0)
                ),
                TouchCallBack(
                  onPressed: (){
                    setState(() {
                      _chartAnalyseWay = 1;
                    });
                  },
                  child:
                    selectButton("趋势", _chartAnalyseWay == 1)
                )

              ],
            ),
                ],
              ),
            ),
        ],
      ),
    );
  }


  Widget selectButton(String title,bool isSelected) {
    if (isSelected) {
      return Container(
          child: Center(child: Text(
              title, style: TextStyle(fontSize: 14.0, color: Colors.white))),
          height: 34,
          width: 55,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                 Color(0xFF00C6FB),
                Color(0xFF006CED)
              ],
            ),
            borderRadius: BorderRadius.circular(17.0),
            border: Border.all(width: 1),
          )
      );
    }
  else{
      return Container(
            child: Center(child: Text(
                  title, style: TextStyle(fontSize: 14.0, color: Colors.white))),
                  height: 34,
                  width: 55,
            );
    }
  }

  /// 选择机构时
  Widget cardForMechanism(){
    return Container(
      decoration: BoxDecoration(
        color: Color(0xFF23283C),
        borderRadius:  BorderRadius.circular(9),
      ),
      margin: EdgeInsets.only(top: 10),
      height: 245,
      child: Image.asset("images/pic2.png"),
    );
  }

  /// 选择趋势时
  Widget cardForTrends(){

    return Container(
      margin: EdgeInsets.only(top: 10),
      height: 300,
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
        color: Color(0xFF23283C),
        child: Column(
          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 25)),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("一般存款",style: TextStyle(fontSize: 14,color: Color(0xFF119CFD)),textAlign: TextAlign.center),
                Icon(Icons.arrow_drop_down,color: Color(0xFF119CFD),size: 18)
              ],
            ),
            chartline(),
            totalScoreBottom()
          ],
        ),
      ),
    );
  }

  Widget chartline(){
      return Container(
        margin: EdgeInsets.only(top: 5),
        child: Stack(
          children: <Widget>[
            ChartLine(
//        backgroundColor: Colors.red,
              chartBeans: [
                ChartBean(x: '1月', y: 200,color: Colors.green),
                ChartBean(x: '', y: 100,color: Colors.red),
                ChartBean(x: '3月', y: 50),
                ChartBean(x: '', y: 100),
                ChartBean(x: '', y: 200),
                ChartBean(x: '6月', y: 400),
                ChartBean(x: '', y: 350),
                ChartBean(x: '', y: 200),
                ChartBean(x: '9月', y: 50),
                ChartBean(x: '', y: 100),
                ChartBean(x: '', y: 250),
                ChartBean(x: '12月', y: 50),

              ],
              isShowHintX:true,
              hintXLineWidth: 0.5,
              hintXColor: Colors.white,
              size: Size(MediaQuery.of(context).size.width - 40,
                  200),
              isCurve: true,
              lineWidth: 2.5,
              lineColor: Color(0xFF00C2FA),
              fontColor: Colors.white70,
              xyColor: Colors.transparent,
              isShowBottomtHintX: true,
              xTextPadding: 5,
              numberOfhintX: 5,
              fontSize: 11,
              yNum: 4,
              isReverse: false,
              isCanTouch: true,
              isShowPressedHintLine: true,
              pressedPointRadius: 4,
              isShowXyRuler: false,
              pressedHintLineWidth: 0.5,
              pressedHintLineColor: Colors.white,
              duration: Duration(milliseconds: 2000),
            ),
            Container(
//          color: Colors.red,
                margin: EdgeInsets.fromLTRB(12, 10, 0, 0),
                child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
            ),
          ],
        ),
      );
  }

  Widget totalScoreBottom(){
    return Container(
      margin: EdgeInsets.only(top: 5,bottom: 5),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 12.5,
            height: 7.5,
            child: Container(
              decoration: ShapeDecoration(
                color: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 5),),
          Text("余额",style: TextStyle(fontSize: 11,color: Colors.white70),)
        ],
      ),
    );
  }


  /// 机构排名
  Widget cardForRank(){
    return Container(
      margin: EdgeInsets.only(top: 0),
      height: 504,
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(9)),
        color: Color(0xFF23283C),
        child: Column(

          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 25)),
            rankTitle(context),

//            Expanded(
////              height: 200,
//              child: ListView.builder(
//
//                  padding: EdgeInsets.zero,
//                  itemCount: rankDatas.length,
//                  itemBuilder: (BuildContext context,int index){
//                    return rankItem(rankDatas[index]);
//                  }),
//            ),
            rankItem(rankDatas[0]),
            rankItem(rankDatas[1]),
            rankItem(rankDatas[2]),
            rankItem(rankDatas[3]),
            rankItem(rankDatas[4]),
            rankItem(rankDatas[5]),
            rankItem(rankDatas[6]),
            rankItem(rankDatas[7]),
            rankItem(rankDatas[8]),
            rankItem(rankDatas[9]),
            dividerLine(),
            Padding(padding: EdgeInsets.only(top: 10)),
            Center(
              child: TouchCallBack(
                onPressed: (){
                  print("展开更多");
                  setState(() {
                    _isShowMore = !_isShowMore;
                  });
                },
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("展开更多",style: TextStyle(fontSize: 15.0,color: Color(0xFF119CFD))),
                    Icon(_isShowMore == true ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,color: Color(0xFF119CFD),size: 24),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}